<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">       
        <el-form-item label="月份" prop="month" >
          <el-select v-model="queryParams.month" placeholder="月份" clearable style="width: 80px;"  >
            <el-option 
              v-for="dict in dict.type.month_data"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item> 
        <el-form-item label="转入方式" prop="transferMethod" v-if="currentUserExportAll">
        <el-select v-model="queryParams.transferMethod" placeholder="转入方式" clearable style="width: 100px;" >
            <el-option
              v-for="dict in dict.type.transfer_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select> 
        </el-form-item >
        <el-form-item label="识别码" prop="userPhone"  v-if="currentUserExportAll">
          <el-input
          style="width: 130px;"
            v-model="queryParams.userPhone"
            placeholder="请输入识别码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> 

        <el-form-item label="接单人员" prop="orderTaker"  v-if="currentUserExportAll">
          <el-input
          style="width: 130px;"
            v-model="queryParams.orderTaker"
            placeholder="请输入接单人员"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>  
        <el-form-item label="工单编号" prop="caseNo" >
          <el-input
          style="width: 130px;"
            v-model="queryParams.caseNo"
            placeholder="请输入工单编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>  
        <el-form-item label="业务类型" prop="businessType"  v-if="currentUserExportAll" >
        <el-select v-model="queryParams.businessType" placeholder="业务类型" clearable style="width: 120px;" >
            <el-option
              v-for="dict in dict.type.business_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select> 
        </el-form-item>
        
        <el-form-item label="涉及部门" prop="relationDept">
          <el-select v-model="queryParams.relationDept" placeholder="涉及部门" clearable style="width: 100px;" >
            <el-option
              v-for="dict in dict.type.relation_dept"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>   
        <el-form-item label="接听坐席是否有问题" prop="serviceProblem" class="labelMaxWidth"> 
          <el-select v-model="queryParams.serviceProblem" @change="changeServiceProblem" placeholder="接听坐席是否有问题" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>

        <el-form-item label="二部坐席是否有问题" prop="twoServiceProblem"  v-if="currentUserExportAll"> 
         <el-select v-model="queryParams.twoServiceProblem" placeholder="二部坐席是否有问题" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="服务态度" prop="serviceAttitude" v-if="queryServiceProblem"> 
        <el-select v-model="queryParams.serviceAttitude" placeholder="服务态度" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="服务技巧" prop="serviceSkills" v-if="queryServiceProblem"> 
        <el-select v-model="queryParams.serviceSkills" placeholder="服务技巧" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="业务解答" prop="businessSolutions" v-if="queryServiceProblem"> 
        <el-select v-model="queryParams.businessSolutions" placeholder="业务解答" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="流程执行" prop="processExecution" v-if="queryServiceProblem"> 
        <el-select v-model="queryParams.processExecution" placeholder="流程执行" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="是否口径客户" prop="isCaliberClient" class="labelMiddleWidth"  v-if="currentUserExportAll"> 
        <el-select v-model="queryParams.isCaliberClient" placeholder="是否口径客户" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>

        <el-form-item label="是否因业务迁怒" prop="isBusinessBlaming" class="labelMaxWidth" v-if="currentUserExportAll"> 
        <el-select v-model="queryParams.isBusinessBlaming" placeholder="是否因业务迁怒" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="是否因同一问题重复投诉" prop="isRepeatedComplaints" class="labelLargeWidth" v-if="currentUserExportAll"> 
        <el-select v-model="queryParams.isRepeatedComplaints" placeholder="是否因同一问题重复投诉" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="是否为贵宾客户" prop="isVipUser"  class="labelMaxWidth" v-if="currentUserExportAll"> 
        <el-select v-model="queryParams.isVipUser" placeholder="是否为贵宾客户" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="是否外溢" prop="isOverflows"  v-if="currentUserExportAll"> 
        <el-select v-model="queryParams.isOverflows" placeholder="是否外溢" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="是否赔偿" prop="overflowCompensation" v-if="currentUserExportAll"> 
          <el-select v-model="queryParams.overflowCompensation" placeholder="是否赔偿" clearable style="width: 80px;" >
              <el-option
                v-for="dict in dict.type.yes_or_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>  
        </el-form-item> 
        <el-form-item label="处理进度" prop="processingProgress" v-if="currentUserExportAll"> 
        <el-select v-model="queryParams.processingProgress" placeholder="处理进度" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.processing_progress"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="是否被表扬" prop="isPraise"  class="labelMiddleWidth" v-if="currentUserExportAll">
           <el-select v-model="queryParams.isPraise" placeholder="是否被表扬" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="是否为优秀录音" prop="isGoodRecording" class="labelMaxWidth" >
           <el-select v-model="queryParams.isGoodRecording" @change="changeIsGoodRecording" placeholder="是否为优秀录音" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>   
        </el-form-item>
        <el-form-item label="服务态度类" prop="attitudeCategory" v-if="queryIsGoodRecording" class="labelMiddleWidth"> 
           <el-select v-model="queryParams.attitudeCategory" placeholder="服务态度类" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="问题解决类" prop="solvingCategory"  v-if="queryIsGoodRecording" class="labelMiddleWidth"> 
           <el-select v-model="queryParams.solvingCategory" placeholder="问题解决类" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item label="其他类" prop="otherCategory" v-if="queryIsGoodRecording"> 
           <el-select v-model="queryParams.otherCategory" placeholder="其他类" clearable style="width: 80px;" >
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>  
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form> 
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd" 
          v-if="currentUserExportAll"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-if="currentUserExportAll"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-if="currentUserExportAll"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
         <el-button type="info" plain icon="el-icon-upload2" size="mini" 
         @click="handleImport" 
          v-if="currentUserExportAll"
         >
         导入</el-button>
      </el-col> 
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"    
          v-if="currentUserExportAll"
        >导出</el-button>
      </el-col>
      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>

    <el-table v-loading="loading" :data="infoList" ref="table"  :key="beforeUpdate()"   tooltip-effect="dark custom-tooltip-effect" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" align="center"   /> 
      <el-table-column label="序号" align="center" type="index" width="50" />
      
      <el-table-column label="基础信息区" align="center"  >
        <el-table-column label="月份" align="center" width="55"  prop="month"   >
        <template slot-scope="scope">
                <dict-tag :options="dict.type.month_data" :value="scope.row.month"/>
              </template>
        </el-table-column>
        <el-table-column label="转入日期" align="center" prop="transferIntoDate" width="100"  v-if="currentUserExportAll" :key="Math.random()" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.transferIntoDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="转入部门" align="center" prop="transferIntoDept" width="80"  v-if="currentUserExportAll" :key="Math.random()" />
        <el-table-column label="转入方式" align="center" prop="transferMethod" width="80" v-if="currentUserExportAll" :key="Math.random()" >
            <template slot-scope="scope">
                <dict-tag :options="dict.type.transfer_type" :value="scope.row.transferMethod"/>
              </template>
        </el-table-column>
        <el-table-column label="工单编号" align="center" prop="caseNo" width="170" :key="Math.random()" />
        <el-table-column label="工单内容" align="center" show-overflow-tooltip prop="caseContent" width="100"  v-if="currentUserExportAll" :key="Math.random()" />  
        <el-table-column label="地区" align="center" prop="region"  v-if="currentUserExportAll" width="80" :key="Math.random()" />
        <el-table-column label="识别信息" align="center" prop="userName"  v-if="currentUserExportAll" width="80"  :key="Math.random()" />
          
        <el-table-column label="识别码" align="center" prop="userPhone" width="110"  v-if="currentUserExportAll" :key="Math.random()" />
        
        <el-table-column label="业务类型" align="center" prop="businessType"  width="110"   v-if="currentUserExportAll" >
        <template slot-scope="scope">
                <dict-tag :options="dict.type.business_type" :value="scope.row.businessType"/>
        </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="坐席信息区" align="center">
          <el-table-column label="被诉录音日期" align="center"   prop="recordingDate" width="100"   :key="Math.random()">
              <template slot-scope="scope"> 
                <span>{{ scope.row.recordingDate }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="被诉录音时间" align="center"  prop="recordingTime" width="100"  :key="Math.random()"/>
          <el-table-column label="涉及部门" align="center" prop="relationDept"  :key="Math.random()">
              <template slot-scope="scope">
                  <dict-tag :options="dict.type.relation_dept" :value="scope.row.relationDept"/>
                </template>
          </el-table-column>
          <el-table-column label="涉及班组" align="center" prop="relationTeam"  :key="Math.random()"/>
          <el-table-column label="座席工号" align="center" prop="employeeId" :key="Math.random()">  
          <template slot-scope="scope">
                      <span>{{ scope.row.employeeId}}</span>
              </template>
          </el-table-column> 
          <el-table-column label="对应座席" align="center" prop="employeeName"  v-if="currentUserExportAll"  :key="Math.random()">  
            <template slot-scope="scope">
                      <span>{{ scope.row.employeeName}}</span>
              </template>
          </el-table-column>
          <el-table-column label="接听坐席是否有问题" align="center" prop="serviceProblem" :key="Math.random()" width="120">
                <template slot="header" slot-scope="scope">
                        接听坐席是否有问题</br>
                        <el-switch  v-model="switchServiceProblem"  active-color="#13ce66" ></el-switch>
                </template>
              <template slot-scope="scope">
                      <span>{{ scope.row.serviceProblem?'是':'否' }}</span>
              </template>
          </el-table-column>
          <el-table-column label="二部坐席是否有问题" align="center" prop="twoServiceProblem" :key="Math.random()"  v-if="currentUserExportAll">
              <template slot-scope="scope">
                      <span>{{ scope.row.twoServiceProblem?'是':'否' }}</span>
              </template>
          </el-table-column>
          <el-table-column label="服务态度" align="center" prop="serviceAttitude" v-if="switchServiceProblem" :key="Math.random()">
            <template slot-scope="scope">
                    <span>{{ scope.row.serviceAttitude?'是':'否' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务技巧" align="center" prop="serviceSkills"   v-if="switchServiceProblem" :key="Math.random()">
              <template slot-scope="scope">
                      <span>{{ scope.row.serviceSkills?'是':'否' }}</span>
              </template>
          </el-table-column>
          <el-table-column label="业务解答" align="center" prop="businessSolutions"  v-if="switchServiceProblem" :key="Math.random()">
            <template slot-scope="scope">  
                  <span>{{ scope.row.businessSolutions?'是':'否' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="流程执行" align="center" prop="processExecution"  v-if="switchServiceProblem" :key="Math.random()">
              <template slot-scope="scope">
                      <span>{{ scope.row.processExecution?'是':'否' }}</span>
              </template>
          </el-table-column>
          <el-table-column label="整体接听情况描述" align="center"  show-overflow-tooltip  prop="answerDescription"  :key="Math.random()"/>
          <el-table-column label="具体问题及相关建议" align="center" show-overflow-tooltip  prop="issuesSuggestions"  :key="Math.random()"/>
          <el-table-column label="二部坐席问题展示" align="center" show-overflow-tooltip  prop="twoDescription"  :key="Math.random()"  v-if="currentUserExportAll"/>
     </el-table-column>
     <el-table-column label="客户附加信息区"  align="center" v-if="currentUserExportAll" >
          <el-table-column label="是否口径客户" align="center" prop="isCaliberClient"  v-if="currentUserExportAll" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.isCaliberClient?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="口径名称" align="center" prop="caliberName"  v-if="currentUserExportAll" :key="Math.random()"/>
          <el-table-column label="是否因业务迁怒" align="center" prop="isBusinessBlaming" v-if="currentUserExportAll" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.isBusinessBlaming?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="是否因同一问题重复投诉" align="center" prop="isRepeatedComplaints"  v-if="currentUserExportAll" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.isRepeatedComplaints?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="是否为贵宾客户" align="center" prop="isVipUser" v-if="currentUserExportAll" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.isVipUser?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="是否外溢" align="center" prop="isOverflows"  v-if="currentUserExportAll" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.isOverflows?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="外溢描述" align="center"  show-overflow-tooltip prop="overflowDescription"  v-if="currentUserExportAll" :key="Math.random()"/>
          <el-table-column label="是否赔偿" align="center" prop="overflowCompensation"   v-if="currentUserExportAll" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.overflowCompensation?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="赔偿金" align="center" prop="compensationMoney"  v-if="currentUserExportAll" :key="Math.random()"/>
          <el-table-column label="其他客户特殊性描述" align="center"  show-overflow-tooltip prop="uniquenesDescription"  v-if="currentUserExportAll" :key="Math.random()"/>
      </el-table-column>
      <el-table-column label="处理信息区" align="center">
          <el-table-column label="接单人员" align="center" prop="orderTaker"  v-if="currentUserExportAll" :key="Math.random()"/>
          <el-table-column label="转交本组人员处理信息" align="center"  show-overflow-tooltip prop="transferInformation" v-if="currentUserExportAll" :key="Math.random()" />
          <el-table-column label="转交中心非本组人员处理情况描述" align="center"  show-overflow-tooltip prop="transferCenter" v-if="currentUserExportAll"  :key="Math.random()"/>
          <el-table-column label="转交其他中心处理情况描述" align="center"  show-overflow-tooltip prop="transferOutCenter"  v-if="currentUserExportAll" :key="Math.random()"/>
          <el-table-column label="分行协助处理情况描述" align="center"  show-overflow-tooltip prop="branchAssistance" v-if="currentUserExportAll"  :key="Math.random()"/>
          <el-table-column label="处理进度" align="center" show-overflow-tooltip  prop="processingProgress" v-if="currentUserExportAll" :key="Math.random()" >
            <template slot-scope="scope">
                  <dict-tag :options="dict.type.processing_progress" :value="scope.row.processingProgress" :key="Math.random()"/>
          </template>
          </el-table-column>
          
          <el-table-column label="处理过程及结果" align="center" show-overflow-tooltip  prop="processResults"  v-if="currentUserExportAll" :key="Math.random()"/>
          <el-table-column label="是否被表扬" align="center" prop="isPraise"  v-if="currentUserExportAll" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.isOverflows?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="是否为优秀录音" align="center" prop="isGoodRecording"  :key="Math.random()">
                <template slot="header" slot-scope="scope">
                        是否为优秀录音</br>
                        <el-switch  v-model="switchIsGoodRecording"  active-color="#13ce66" ></el-switch>
                </template>
              <template slot-scope="scope">
                      <span>{{ scope.row.isGoodRecording?'是':'否' }}</span>
              </template>
          </el-table-column>
          <el-table-column label="服务态度类" align="center" prop="attitudeCategory" v-if="switchIsGoodRecording" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.attitudeCategory?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="问题解决类" align="center" prop="solvingCategory" v-if="switchIsGoodRecording" :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.solvingCategory?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="其他类" align="center" prop="otherCategory" v-if="switchIsGoodRecording"  :key="Math.random()">
          <template slot-scope="scope">
                  <span>{{ scope.row.otherCategory?'是':'否' }}</span>
          </template>
          </el-table-column>
          <el-table-column label="回复人员工号" align="center" prop="replyStaffId"  :key="Math.random()"/>
          <el-table-column label="回复日期" align="center" prop="replyDate"  width="100"  :key="Math.random()" />
          <el-table-column label="回复时间" align="center" prop="replyTime" />
          <el-table-column label="录音及优点描述" align="center" show-overflow-tooltip  prop="advantageDescription"  :key="Math.random()"/>
       </el-table-column >
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="100"  v-if="currentUserExportAll" :key="Math.random()">
        <template slot-scope="scope">
         <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="!currentUserExportAll"
          >查看</el-button>
          -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="currentUserExportAll"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-if="currentUserExportAll"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改投诉处理信息信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <div class="el-backtop" style="right: 100px; bottom: 150px;">
          <a href="#bottom"><i class="el-icon-caret-bottom"></i></a> 
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-divider content-position="left">基础信息区</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="月份" prop="month" >
              <el-select v-model="form.month" placeholder="请选择月份">
                <el-option v-for="dict in dict.type.month_data" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item> 
          </el-col>
          <el-col :span="8">
        <el-form-item label="转入日期" prop="transferIntoDate" v-if="currentUserExportAll">
          <el-date-picker clearable
            v-model="form.transferIntoDate"
            type="date"
            value-format="yyyy-MM-dd"
            format="MM月dd日"
            placeholder="请选择转入日期">
          </el-date-picker>
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="转入部门" prop="transferIntoDept" v-if="currentUserExportAll">
          <el-input v-model="form.transferIntoDept" placeholder="请输入转入部门" />
        </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
        <el-form-item label="转入方式" prop="transferMethod" v-if="currentUserExportAll">
           <el-select v-model="form.transferMethod" placeholder="请输入转入方式">
                <el-option v-for="dict in dict.type.transfer_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select> 
        </el-form-item>
          </el-col> 
          <el-col :span="8">
        <el-form-item label="工单编号" prop="caseNo">
          <el-input v-model="form.caseNo" placeholder="请输入工单编号" />
        </el-form-item>
          </el-col> 
        </el-row>
        <el-row> 
        <el-form-item label="工单内容" v-if="currentUserExportAll">
          <el-input v-model="form.caseContent" type="textarea" :min-height="192"/>
        </el-form-item>
        </el-row>
        <el-row> 
          <el-col :span="8">
        <el-form-item label="地区" prop="region" v-if="currentUserExportAll">
          <el-input v-model="form.region" placeholder="请输入地区" />
        </el-form-item>
          </el-col> 
          <el-col :span="8">
        <el-form-item label="识别信息" prop="userName" v-if="currentUserExportAll">
          <el-input v-model="form.userName" placeholder="请输入识别信息" />
        </el-form-item>
          </el-col> 
          <el-col :span="8">
        <el-form-item label="识别码" prop="userPhone" v-if="currentUserExportAll">
          <el-input v-model="form.userPhone" placeholder="请输入识别码" />
        </el-form-item>
          </el-col> 
        </el-row>

        <el-row> 
          <el-col :span="8">
            <el-form-item label="业务类型" v-if="currentUserExportAll">
              <el-select v-model="form.businessType" placeholder="请选择业务类型">
                <el-option v-for="dict in dict.type.business_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item> 
          </el-col> 
        </el-row>
        
      <el-divider content-position="left">坐席信息区</el-divider>
        <el-row> 
          <el-col :span="8">
            <el-form-item label="被诉录音日期" prop="recordingDate">
              <el-date-picker clearable
                v-model="form.recordingDate"
                type="date"
                value-format="yyyy-MM-dd"
                format="MM月dd日"
                placeholder="请选择被诉录音日期">
              </el-date-picker>
            </el-form-item>
          </el-col> 
          <el-col :span="8"> 
             <el-form-item label="被诉录音时间" prop="recordingTime"> 
             
          <el-input v-model="form.recordingTime" placeholder="请输入被诉录音时间" /> 
            </el-form-item>
          </el-col> 
          <el-col :span="8">
        <el-form-item label="涉及部门" prop="relationDept"> 
           <el-select v-model="form.relationDept" placeholder="请选择涉及部门">
                <el-option v-for="dict in dict.type.relation_dept" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
           </el-select>
        </el-form-item>
          </el-col> 
        </el-row> 
        <el-row> 
          <el-col :span="8">
        <el-form-item label="涉及班组" prop="relationTeam">
          <el-input v-model="form.relationTeam" placeholder="请输入涉及班组" />
        </el-form-item>
          </el-col> 
          <el-col :span="8">
        <el-form-item label="座席工号" prop="employeeId">
          <el-input v-model="form.employeeId" placeholder="请输入座席工号" />
        </el-form-item>  
          </el-col>  
          <el-col :span="8"> 
        <el-form-item label="对应座席" prop="employeeName">
          <el-input v-model="form.employeeName" placeholder="请输入对应座席" />
        </el-form-item>
          </el-col> 
        </el-row> 
        <el-row> 
          <el-col :span="8">
            <el-form-item label="接听坐席是否有问题" prop="serviceProblem">
                <el-switch
                  v-model="form.serviceProblem"
                  @change="dialogServiceProblemChange"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col> 
          
          <el-col :span="8"  v-if="currentUserExportAll">
              <el-form-item label="二部坐席是否有问题" prop="twoServiceProblem"> 
                  <el-switch
                        v-model="form.twoServiceProblem"
                        active-text="是"
                        inactive-text="否">
                      </el-switch> 
              </el-form-item>
          </el-col> 
          <el-col :span="8" v-if="dialogServiceProblem"> 
              <el-form-item label="服务态度" prop="serviceAttitude"> 
                  <el-switch
                        v-model="form.serviceAttitude"
                        active-text="是"
                        inactive-text="否">
                      </el-switch> 
              </el-form-item>
          </el-col> 
        </el-row> 
        <el-row v-if="dialogServiceProblem"> 
          <el-col :span="8">
            <el-form-item label="服务技巧" prop="serviceSkills">  
                <el-switch
                      v-model="form.serviceSkills"
                      active-text="是"
                      inactive-text="否">
                    </el-switch> 
            </el-form-item>
          </el-col> 
          <el-col :span="8">
              <el-form-item label="业务解答" prop="businessSolutions"> 
                  <el-switch
                        v-model="form.businessSolutions"
                        active-text="是"
                        inactive-text="否">
                      </el-switch> 
              </el-form-item>
          </el-col> 
          <el-col :span="8">
              <el-form-item label="流程执行" prop="processExecution"> 
                  <el-switch
                        v-model="form.processExecution"
                        active-text="是"
                        inactive-text="否">
                      </el-switch> 
              </el-form-item>
          </el-col>  
        </el-row>
        <el-form-item label="整体接听情况描述" prop="answerDescription">
          <el-input v-model="form.answerDescription" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="具体问题及相关建议" prop="issuesSuggestions">
          <el-input v-model="form.issuesSuggestions" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="二部坐席问题展示" prop="twoDescription"  v-if="currentUserExportAll">
          <el-input v-model="form.twoDescription" type="textarea" placeholder="请输入内容" />
        </el-form-item>

      <el-divider content-position="left" v-if="currentUserExportAll">客户附加信息区</el-divider> 
        <el-row  v-if="currentUserExportAll"> 
          <el-col :span="8">
            <el-form-item label="是否口径客户" prop="isCaliberClient"> 
                <el-switch
                      v-model="form.isCaliberClient"
                      active-text="是"
                      inactive-text="否">
                    </el-switch> 
            </el-form-item>
          </el-col> 
          <el-col :span="8">
            <el-form-item label="口径名称" prop="caliberName">  
              <el-input v-model="form.caliberName" placeholder="请输入口径名称" />
            </el-form-item>
          </el-col> 
          <el-col :span="8">
            <el-form-item label="是否因业务迁怒" prop="isBusinessBlaming">
                <el-switch
                      v-model="form.isBusinessBlaming"
                      active-text="是"
                      inactive-text="否">
                    </el-switch> 
            </el-form-item>
          </el-col> 
        </el-row> 
        
        
        <el-row v-if="currentUserExportAll"> 
          <el-col :span="8">
            <el-form-item label="是否因同一问题重复投诉" prop="isRepeatedComplaints">
                <el-switch
                  v-model="form.isRepeatedComplaints"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col> 
          <el-col :span="8">
            <el-form-item label="是否为贵宾客户" prop="isVipUser"> 
              <el-switch
                  v-model="form.isVipUser"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
              </el-form-item> 
          </el-col>  
          <el-col :span="8">
            <el-form-item label="是否外溢" prop="isOverflows"> 
            <el-switch
                  v-model="form.isOverflows"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col> 
        </el-row> 

        <el-row v-if="currentUserExportAll"> 
          <el-col :span="8">
            <el-form-item label="外溢描述" prop="overflowDescription">
              <el-input v-model="form.overflowDescription" placeholder="请输入外溢描述" />
            </el-form-item>
          </el-col> 
          <el-col :span="8">
            <el-form-item label="是否赔偿" prop="overflowCompensation"> 
              
            <el-switch
                  v-model="form.overflowCompensation"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col> 
          
          <el-col :span="8">
            <el-form-item label="赔偿金" prop="compensationMoney">
              <el-input v-model="form.compensationMoney" placeholder="请输入赔偿金" />
            </el-form-item>
          </el-col> 
        </el-row>  
        <el-row v-if="currentUserExportAll">  
            <el-form-item label="其他客户特殊性描述" prop="uniquenesDescription">
              <el-input v-model="form.uniquenesDescription" type="textarea" placeholder="请输入其他客户特殊性描述" />
            </el-form-item> 
        </el-row>   

        
      <el-divider content-position="left">处理信息区</el-divider> 
        <el-row v-if="currentUserExportAll">  
          <el-col :span="8">
            <el-form-item label="接单人员" prop="orderTaker">
              <el-input v-model="form.orderTaker" placeholder="请输入接单员" />
            </el-form-item> 
          </el-col> 
        </el-row>  
        <el-row v-if="currentUserExportAll">  
          <el-form-item label="转交本组人员处理信息" prop="transferInformation">
            <el-input v-model="form.transferInformation" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-row>  
        <el-row v-if="currentUserExportAll">  
          <el-form-item label="转交中心非本组人员处理情况描述" prop="transferCenter">
            <el-input v-model="form.transferCenter" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-row>  
        <el-row v-if="currentUserExportAll">  
          <el-form-item label="转交其他中心处理情况描述" prop="transferOutCenter">
            <el-input v-model="form.transferOutCenter" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-row>  
        <el-row v-if="currentUserExportAll">  
          <el-form-item label="分行协助处理情况描述" prop="branchAssistance">
            <el-input v-model="form.branchAssistance" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-row>  
        <el-form-item label="处理进度" prop="processingProgress" v-if="currentUserExportAll">
             <el-select v-model="form.processingProgress" placeholder="请输入处理进度">
                <el-option v-for="dict in dict.type.processing_progress" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select> 
        </el-form-item>
        <el-form-item label="处理过程及结果" prop="processResults" v-if="currentUserExportAll">
          <el-input v-model="form.processResults" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        
        <el-row>  
          <el-col :span="8" v-if="currentUserExportAll">
            <el-form-item label="是否被表扬" prop="isPraise"> 
                 <el-switch
                  v-model="form.isPraise"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否为优秀录音" prop="isGoodRecording"> 
                 <el-switch
                  v-model="form.isGoodRecording"
                  @change="dialogIsGoodRecordingChange"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dialogIsGoodRecording">
            <el-form-item label="服务态度类" prop="attitudeCategory"> 
                <el-switch
                  v-model="form.attitudeCategory"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col>
        
        </el-row>  
        <el-row>  
          <el-col :span="8" v-if="dialogIsGoodRecording">  
            <el-form-item label="问题解决类" prop="solvingCategory"> 
                <el-switch
                  v-model="form.solvingCategory"
                  active-text="是"
                  inactive-text="否">
                </el-switch> 
            </el-form-item>
          </el-col>
          
          <el-col :span="8" v-if="dialogIsGoodRecording">  
            <el-form-item label="其他类" prop="otherCategory">
              <el-switch
                  v-model="form.otherCategory"
                  active-text="是"
                  inactive-text="否">
                </el-switch>  
            </el-form-item>
          </el-col>

          
          <el-col :span="8"> 
            <el-form-item label="回复人员工号" prop="replyStaffId">
              <el-input v-model="form.replyStaffId" placeholder="请输入回复人员工号" />
            </el-form-item>
          </el-col>
        </el-row>

  

        <el-row>  
          <el-col :span="8">  
            <el-form-item label="回复日期" prop="replyDate"> 
               <el-date-picker clearable
                v-model="form.replyDate"
                type="date"
                value-format="yyyy-MM-dd"
                format="MM月dd日"
                placeholder="请选择回复日期">
              </el-date-picker>

            </el-form-item>
          </el-col>
          <el-col :span="8">  
            <el-form-item label="回复时间" prop="replyTime">  
                <el-input v-model="form.replyTime" placeholder="请输入被诉录音时间" />  
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>  
          <el-form-item label="录音及优点描述" prop="advantageDescription">
            <el-input v-model="form.advantageDescription" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-row>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <a href="#bottom" id="bottom"></a>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip"> 
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/system/info";
import {   getUser } from "@/api/system/user";
import { getToken } from "@/utils/auth";

export default {
  name: "Info",
  dicts: ['month_data', 'relation_dept','business_type','yes_or_no','transfer_type','processing_progress'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 投诉处理信息信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        month: null,
        transferIntoDate: null,
        transferIntoDept: null,
        transferMethod: null,
        caseNo: null,
        caseContent: null,
        region: null,
        userName: null,
        userPhone: null,
        businessType: null,
        recordingDate: null,
        recordingTime: null,
        relationDept: null,
        relationTeam: null,
        employeeIdName: null,
        serviceProblem: null,
        serviceAttitude: null,
        serviceSkills: null,
        businessSolutions: null,
        processExecution: null,
        answerDescription: null,
        issuesSuggestions: null,
        isCaliberClient: null,
        caliberName: null,
        isBusinessBlaming: null,
        isRepeatedComplaints: null,
        isVipUser: null,
        isOverflows: null,
        overflowDescription: null,
        overflowCompensation: null,
        compensationMoney: null,
        uniquenesDescription: null,
        orderTaker: null,
        transferInformation: null,
        transferCenter: null,
        transferOutCenter: null,
        branchAssistance: null,
        processingProgress: null,
        processResults: null,
        isPraise: null,
        isGoodRecording: null,
        attitudeCategory: null,
        solvingCategory: null,
        otherCategory: null,
        replyStaffId: null,
        replyDate: null,
        replyTime: null,
        advantageDescription: null
      },
      currentUserExportAll:false,
      // 导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/info/importData"
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        month: [
          { required: true, message: "月份不能为空", trigger: "blur" }
        ], 
        caseNo: [
          { required: true, message: "工单编号不能为空", trigger: "blur" }
        ], 
      },
      //列表开关
      switchServiceProblem:false,
      switchIsGoodRecording:false,
      //查询开关
      queryServiceProblem:false,
      queryIsGoodRecording:false,
      //对话框开关
      dialogIsGoodRecording:false,
      dialogServiceProblem:false,
    };
  },
  created() {
    this.getList();
    this.getCurrentUser();
  },
  methods: {
    getCurrentUser(){  
      const id = this.$store.state.user.id; 
      getUser(id).then(response => {  
        console.log(response.data)
        this.currentUserExportAll=response.data.dept.exportAll;
        if(this.currentUserExportAll){
            //列表开关
            this.switchServiceProblem=true
            this.switchIsGoodRecording=true
            //查询开关
            this.queryServiceProblem=true
            this.queryIsGoodRecording=true
            //对话框开关
            this.dialogIsGoodRecording=true
            this.dialogServiceProblem=true
        }
      
      }); 
    },
    beforeUpdate() {
    // table数据更新后，重新渲染table避免闪动
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
   },
  
    /** 查询投诉处理信息信息列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        month: null,
        transferIntoDate: null,
        transferIntoDept: null,
        transferMethod: null,
        caseNo: null,
        caseContent: null,
        region: null,
        userName: null,
        userPhone: null,
        businessType: null,
        recordingDate: null,
        recordingTime: null,
        relationDept: null,
        relationTeam: null,
        employeeIdName: null,
        serviceProblem: null,
        serviceAttitude: null,
        serviceSkills: null,
        businessSolutions: null,
        processExecution: null,
        answerDescription: null,
        issuesSuggestions: null,
        isCaliberClient: null,
        caliberName: null,
        isBusinessBlaming: null,
        isRepeatedComplaints: null,
        isVipUser: null,
        isOverflows: null,
        overflowDescription: null,
        overflowCompensation: null,
        compensationMoney: null,
        uniquenesDescription: null,
        orderTaker: null,
        transferInformation: null,
        transferCenter: null,
        transferOutCenter: null,
        branchAssistance: null,
        processingProgress: null,
        processResults: null,
        isPraise: null,
        isGoodRecording: null,
        attitudeCategory: null,
        solvingCategory: null,
        otherCategory: null,
        replyStaffId: null,
        replyDate: null,
        replyTime: null,
        advantageDescription: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加投诉处理信息信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getInfo(id).then(response => {
        this.form = response.data; 
        this.open = true;
        this.title = "修改投诉处理信息信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除投诉处理信息信息编号为"' + ids + '"的数据项？').then(function() {
        return delInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    changeIsGoodRecording(e){
      if(this.currentUserExportAll) return;
      if(e=="true"){  
        this.queryIsGoodRecording=true;
      }else{
        this.queryIsGoodRecording=false;
      }
    },
    changeServiceProblem(e){
      if(this.currentUserExportAll) return;
      console.log(e)
      if(e=="true"){
        this.queryServiceProblem=true;
      }else{
        this.queryServiceProblem=false;
      }
    },
    dialogServiceProblemChange(e){
      if(this.currentUserExportAll) return;
      if(e){
        this.dialogServiceProblem=true;
      }else{
        this.dialogServiceProblem=false;
      }
    },
    dialogIsGoodRecordingChange(e){
      if(this.currentUserExportAll) return;
      if(e){
        this.dialogIsGoodRecording=true;
      }else{
        this.dialogIsGoodRecording=false;
      }
    }, 
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/info/export', {
        ...this.queryParams
      }, `info_${new Date().getTime()}.xlsx`)
    },
    
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "投诉处理信息导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() { 
      this.download('system/info/importTemplate', {
      }, `caseInfo_template_${new Date().getTime()}.xlsx`) 
    }, 
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
<style lang="scss">
.custom-tooltip-effect{
  max-width: 600px;
  line-height: 23px;
}
.labelMaxWidth > .el-form-item__label{
  width:120px!important;
}
.labelMiddleWidth > .el-form-item__label{
  width:100px!important;
}
.labelLargeWidth > .el-form-item__label{
  width:180px!important;
}
.el-form--inline .el-form-item__label{
display: inline;
}
.el-form-item--small.el-form-item{
  margin-bottom: 10px;
}
</style>
